$(function() {
    var currentPage = 1;
    var pageSize = 3;
    var picArr = []; //用于存放最近上传的图片

    //1. 请求并渲染第一屏数据
    function render() {
        $.ajax({
            type: 'get',
            url: '/product/queryProductDetailList',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function(info) {
                console.log(info);
                //渲染
                $('tbody').html(template('tmp', info));
                //生成分页标签
                setPage(info.total);
            }
        });
    }

    render();

    //2. 分页
    function setPage(total) {
        $('#pagintor').bootstrapPaginator({
            bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
            currentPage: currentPage, //当前页
            totalPages: Math.ceil(total / pageSize), //总页数
            onPageClicked: function(event, originalEvent, type, page) {
                //为按钮绑定点击事件 page:当前点击的按钮值
                currentPage = page; //记录当前页的变化
                render();
            }

        });
    }

    //3. 填充二级分类的数据
    $.ajax({
        type: 'get',
        url: '/category/querySecondCategoryPaging',
        data: {
            page: 1,
            pageSize: 100
        },
        dataType: 'json',
        success: function(info) {
            console.log(info);
            //渲染
            $('.brand-list').html(template('tmp-brand', info));
        }
    });

    //4. 点击二级分类的下拉列表, 把选中的品牌文字赋值给按钮 用隐藏域保存id
    $('.brand-list').on('click', 'a', function() {
        //把当前a标签的文字 赋值给按钮
        $('.title-text').text($(this).text());
        //用隐藏域来保存数据的ID 
        $('.brandd').val($(this).attr('data-id'));
        //手动改变字段状态
        $('#form1').data('bootstrapValidator').updateStatus('brandId', 'VALID');
    });

    //5. 上传商品图片
    //商品 需要保留最新上传的三张
    $("#file").fileupload({
        dataType: "json",
        //e：事件对象
        //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
        done: function(e, data) {
            //把最新上传的图片添加到数组的前面
            picArr.unshift(data.result);
            //显示当前图片
            $('.pic-box').prepend('<img src="' + data.result.picAddr + '" height="100px">')
            if (picArr.length > 3) {
                //删除最后一个
                picArr.pop();
                //删除图片最后一个容器
                $('.pic-box img:last-child').remove();
            }
            console.log(picArr);
            //如果图片个数为3 则图片验证通过
            if (picArr.length == 3) {
                //手动改变字段状态
                $('#form1').data('bootstrapValidator').updateStatus('picStatus', 'VALID');
            }
        }
    });

    //6. 表单校验
    $('#form1').bootstrapValidator({
        //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [],

        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },

        //3. 配置字段
        fields: {
            brandId: {
                validators: {
                    notEmpty: {
                        message: '请选择二级分类!'
                    }
                }
            },
            proName: {
                validators: {
                    notEmpty: {
                        message: '商品名称不能为空!'
                    }
                }
            },
            proDesc: {
                validators: {
                    notEmpty: {
                        message: '商品描述不能为空!'
                    }
                }
            },
            num: {
                validators: {
                    notEmpty: {
                        message: '库存不能为空!'
                    },
                    //正则校验
                    regexp: {
                        regexp: /^[1-9]\d*$/,
                        message: '库存必须时非0开头的数字!'
                    }
                }
            },
            size: {
                validators: {
                    notEmpty: {
                        message: '尺寸不能为空!'
                    },
                    //正则校验
                    regexp: {
                        regexp: /^[1-9]\d{1}-[1-9]\d{1}$/,
                        message: '商品尺码必须时 xx-xx格式!'
                    }
                }
            },
            oldPrice: {
                validators: {
                    notEmpty: {
                        message: '原价不能为空!'
                    },
                    regexp: {
                        regexp: /^[1-9]\d*$/,
                        message: '价格不能为非数字!'
                    }
                }
            },
            price: {
                validators: {
                    notEmpty: {
                        message: '现价不能为空!'
                    },
                    regexp: {
                        regexp: /^[1-9]\d*$/,
                        message: '价格不能为非数字!'
                    }
                }
            },
            picStatus: {
                validators: {
                    notEmpty: {
                        message: '图片必须为三张!'
                    }
                }
            }
        }
    });

    //7. 表单验证通过后 向后台发送ajax请求 添加商品数据
    $('#form1').on('success.form.bv', function(e) {
        //阻止表单提交的默认行为
        e.preventDefault();
        //处理数据
        var str = $('#form1').serialize();
        //把数组中三张图片的数据转成json字符串格式 拼接到查询字符串后面
        str += '&' + 'picArr=' + JSON.stringify(picArr);
        $.ajax({
            type: 'post',
            url: '/product/addProduct',
            data: str,
            dataType: 'json',
            success: function(info) {
                console.log(info);
                //隐藏模态框
                $('#modal-add').modal('hide');
                //重新渲染第一页
                currentPage = 1;
                render();
                //表单重置 验证样式和数据
                $('#form1').data('bootstrapValidator').resetForm(true);
                //手动重置 图片列表 和 下拉列表
                $('.pic-box').empty();
                $('.title-text').text('请选择二级分类');
                //数组重置
                picArr = []; //把本次添加的数据清除以免影响下次判断
            }
        });
    });
});